<template>
    <div>
        <div class="logo_div">
            <img src="@/assets/logo.png" class="logo"/>
        </div>
        <div class="form_box">
            <el-form ref="form" :model="form" label-width="80px">
                <el-form-item label="手机号">
                    <el-input v-model="form.utell"></el-input>
                </el-form-item>
                <el-form-item label="验证码" style="position:relative">
                    <el-input v-model="form.utellcode"></el-input>
                        <template>
                            <div v-if="messageCodeVis" class="second-text">{{countdown}}秒后重新获取</div>
                            <el-button v-else type="text" @click="getTellCode" style="width: 80px;position: absolute;right: 10px;">获取验证码</el-button>
                        </template>
                </el-form-item>
                <el-form-item label="密码">
                    <el-input type="password" v-model="form.upwd"></el-input>
                </el-form-item>
                <el-form-item label="确认密码">
                    <el-input type="password" v-model="form.upwd2"></el-input>
                </el-form-item>
            </el-form>
        </div>
        <div class="login_btn_div">
            <el-button type="primary" @click="zhuce">注册</el-button>
            <el-button @click="toRegister">已有账号直接登录</el-button>
        </div>
    </div>
</template>
  
<script>
  
export default {
    components: {
      
    },
    data(){
      return{
        form: {
            utell: '',
            utellcode:'',
            upwd:'',
            upwd2:''
        },
        messageCodeVis:false,
        countdown:120
      }
    },
    methods:{
        toRegister(){
            this.$router.push({
                path:'/'
            })
        },
        getTellCode(){
            const reg = /^1[3456789]\d{9}$/;
            if(!this.form.utell){
                this.$message.error('请输入手机号');
                return false
            }
            if (!reg.test(this.form.utell)){
                this.$message.error('请输入正确手机号');
                return
            }
            this.countdown=120
            this.messageCodeVis= true
            this.startCountdown()
        },
        startCountdown(){
            const intervalId = setInterval(() => {
                if (this.countdown > 0) {
                    this.countdown--;
                } else {
                    clearInterval(intervalId)
                    this.messageCodeVis = false
                }
            }, 1000)
        },
        zhuce(){
            const reg = /^1[3456789]\d{9}$/;
            if(!this.form.utell){
                this.$message.error('请输入手机号');
                return false
            }
            if (!reg.test(this.form.utell)){
                this.$message.error('请输入正确手机号');
                return
            }
            if(!this.form.utellcode){
                this.$message.error('请输入验证码');
                return false
            }
            if(!this.form.upwd){
                this.$message.error('请输入密码');
                return false
            }
            if(this.form.upwd!=this.form.upwd2){
                this.$message.error('两次输入密码不一致!');
                return false
            }
            this.apis.register({
                utell:this.form.utell,
                utellcode:this.form.utellcode,
                upwd:this.form.upwd
            }).then(res=>{
                
            })
        }
    }
}
</script>
  
<style scoped lang="scss">
    .logo_div{
        text-align: center;
    }
    .logo{
        width: 190px;
        margin-top: 15%;
    }
    .form_box{
        width: 80%;
        margin-left: 10%;
    }
    ::v-deep .el-form-item__label{
        text-align: left;
    }
    .login_btn_div{
        width: 80%;
        margin-left: 10%;
    }
    ::v-deep .el-button{
        width: 100%;
    }
    ::v-deep .el-button+.el-button{
        margin-left: 0;
        margin-top: 20px;
    }
    .second-text{
        color: #409EFF;
        display: inline-block;
        position: absolute;
        right: 10px;
        font-size: 13px;
    }
</style>
  